<template>
  <div ref="t4">
    <div class="print-wrap-58 print-wrap-normal temp_plate" style="width:58mm; height: auto;
  font-size: 12px;
  border: 1px solid #a5a5a5;
  box-shadow: 2px 2px 2px #d3d3d3;
  word-break: break-all;">
      <div
        class="headerwithlogo"
        style="text-align:center; "
      >
        <div class="logopanel">
          <!-- <img v-bind:src="s.LogoUrl" v-bind:width="s.LogoWidth" v-bind:height="s.LogoHeight" /> -->
        </div>
        <h2 class="hotelname" style="font-size: 14px;">{{seller?seller.sellerName:"酒店"}}结账单</h2>
        <div class="logogstate">
          <!-- <span v-if="s.CurrentPrintTimes"><span class="printtimeslabel">打印次数: </span> {{s.CurrentPrintTimes}}</span> -->
        </div>
      </div>
      <div style="font-weight:bold;">
        <span>{{ftype}}</span>
        <span style="float:right;">NO.{{info?info.singleEntity.closingNo:'未结账'}}</span>
      </div>
      <br>
      <p class="panelone panelone1_2">
        <span>姓名: </span>
        <span class="inputspan">{{info?info.peopleEntity.name:'貂蝉'}}</span>
        <span>单号: </span>
        <span class="inputspan">{{info?info.singleEntity.closingNo:'J20191024000001'}}</span>
      </p>

      <p class="panelone panelone1_2">

        <span>房号: </span>
        <span>{{info?info.floorRoomEntity.roomSign:''}}{{info?info.floorRoomEntity.roomNum:'6319'}}</span>
        <span>来时: </span>
        <span>{{ info?info.singleEntity.arrivalsTime:'2019-08-31 09:34' }}</span>
      </p>

      <p class="panelone panelone1_2">

        <span>天数: </span>
        <span>{{ info?info.singleEntity.days:'1' }}</span>
        <span>离时: </span>
        <span>{{ info?info.singleEntity.predissociationTime:'2019-09-01 02:00' }}</span>

      </p>

      <p class="panelone panelone1_2">

        <span>会员: </span>
        <span v-if="info">
          <span v-if="info.singleEntity.sourceType == 1">{{memberLevelDetailEntity.levelName}}</span>
          <span v-else>非会员</span>
        </span>
        <span v-else>非会员</span>
        <template v-if="info && info.singleEntity.sourceType == 1">
          <span>卡号: </span>
          <span>{{memberLevelDetailEntity.cardJustNo}}</span>
        </template>

      </p>

      <p class="panelone panelone1_2" v-if="info && info.singleEntity.sourceType == 1">
        <template>
          <span>积分: </span>
          <span>{{memberLevelDetailEntity.score}}</span>
          <span>余额: </span>
          <span>{{memberLevelDetailEntity.balance}}</span>
        </template>
      </p>

      <p class="panelone panelone1_2">
        <span>协议: </span>
        <span>无</span>
      </p>

      <table
        style="width:100%;font-size:13px;margin-bottom: 3px; "
        class="dastable"
      >
        <tr>
          <td>房间号</td>
          <td>科目</td>
          <td>收款</td>
          <td>费用</td>
          <td>付款方式</td>
        </tr>
        <tr>
          <td colspan="6">
            <hr style="border:1px dashed #000; height:1px">
          </td>
        </tr>
        <tr

          v-for="item in financeData2"
          :key="item.id"
        >
          <td style="height:5mm;">
            {{info?info.floorRoomEntity.roomSign:''}}{{info?info.floorRoomEntity.roomNum:'6319'}}
          </td>
          <td>
            <div v-if="item.payType == 0"><span>预收账款</span></div>
            <div v-if="item.payType == 1"><span>预授权</span></div>
            <div v-if="item.payType == 2">
              <span>{{ item.consumeName }}</span>
            </div>
            <div v-if="item.payType == 3"><span>押金</span></div>
            <div v-if="item.payType == 4"><span>房费</span></div>
            <div v-if="item.payType == 5"><span>预收退款</span></div>
            <div v-if="item.payType == 6"><span>结账收款</span></div>
            <div v-if="item.payType == 7"><span>结账退款</span></div>
            <div v-if="item.payType == 8"><span>退押金</span></div>
            <div v-if="item.payType == 9"><span>冲账</span></div>
          </td>
          <td>

            <span v-if="item.payType == 0 || item.payType == 3 || item.payType == 6 || item.payType == 5 || item.payType == 7 || item.payType == 8 || item.payType == 9">
              <span v-if="item.payType == 8 || item.payType == 5 || item.payType == 7">-</span>
              {{item.payPrice}}
            </span>
          </td>
          <td>

            <span v-if="item.payType == 2 || item.payType == 4">
              {{item.payPrice}}
            </span>
          </td>
          <td>
            <span v-if="item.nowTypeName">{{ item.nowTypeName }}</span>
            <span v-else>--</span>
          </td>
        </tr>
        <tr class="lastrow">
          <td colspan="6"></td>
        </tr>
        <tr>
          <td colspan="6">
            <hr style="border:1px dashed #000; height:1px">
          </td>
        </tr>
        <tr>
          <td
            colspan="2"
            style="text-align:right;"
          >合计:</td>

          <td>
            {{info?sum2:'700'}}
          </td>
          <td>
            {{info?sum1:'169'}}
          </td>
          <td></td>
        </tr>
      </table>

      <div v-html="note" style="margin-top: 10px;" class="mf15mmwithbigsize"></div>

      <p class="panelone">
        <span>宾客签字: </span>
        <span class="inputspan"></span>
      </p>

      <p class="panelone">
        <span>操作员: </span>
        <span>{{user?user.username:'模板'}}</span>
      </p>

      <p class="panelone">
        <span>预定电话: </span>
        <span>{{seller?seller.tel:"模板"}}</span>
      </p>
      <p class="panelone">
        <span>酒店地址: </span>
        <span>{{seller?seller.address:"模板"}}</span>
      </p>
      <p class="panelone">
        <span>打印时间: </span>
        <span>{{ nowDate + ' ' + nowTime + ' '}}</span>
      </p>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  props: ['note', 'info', 'priceMap', 'currData', 'financeData'],
  watch: {
    financeData (newV, oldV) {
      // do something
      this.financeData = newV
      this.$nextTick(() => {
        this.sum();
      })
    },
    deep: true
  },
  data () {
    return {
      nowDate: "",    // 当前日期
      nowTime: "",    // 当前时间
      nowWeek: "",     // 当前星期
      today: moment().format('YYYY-MM-DD'),
      user: {},
      seller: {},
      sum1: 0,
      sum2: 0,
      testEntity:{
        sum1:200,
        sum2:200,
        testData: [],
      },
      memberLevelDetailEntity:{
        levelName:'',
        cardJustNo:'',
        score:'',
        balance:'',
      },
      financeData2: [],
      dataList: [],
      ftype: '',
      payTypes: ['预收账款', '信用卡授权', '消费', '押金', '房费', '预收退款', '结账收款', '结账退款', '退押金']
    }
  },
  methods: {
    initFinanceData(data){
      this.financeData2 = data
      this.sum()
      this.$forceUpdate();
    },
    initMemberLevelDetailEntity(data){
      this.memberLevelDetailEntity = data
    },
    currentTime () {
      setInterval(this.getDate, 500);
    },
    getUser () {
      this.$http({
        url: this.$http.adornUrl(`/hotel/thotelprinttemplate/printInfo`),
        method: 'get',
      }).then(({ data }) => {
        if (data.code === 0) {
          this.user = data.user;
          this.seller = data.seller;
        }
      })
    },
    sum () {
      this.sum1 = 0;
      this.sum2 = 0;
      this.financeData2.forEach(element => {
        if (this.sum1 == 0) {
          if (element.type == 0) {
            this.ftype = "未结"
          }
          if (element.type == 1) {
            this.ftype = "已结"
          }
          if (element.type == 2) {
            this.ftype = "已转"
          }
        }
        if (element.payType == 2 || element.payType == 4) {
          this.sum1 += element.payPrice;
        }
        if (element.payType == 0 || element.payType == 3 || element.payType == 6 || element.payType == 5 || element.payType == 7 || element.payType == 8) {
          if(element.payType == 8 || element.payType == 5 || element.payType == 7){
            this.sum2 += -element.payPrice
          }else{
            this.sum2 += element.payPrice
          }

        }
      });
    },
    getDate: function () {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      if (week == 1) {
        this.nowWeek = "星期一";
      } else if (week == 2) {
        this.nowWeek = "星期二";
      } else if (week == 3) {
        this.nowWeek = "星期三";
      } else if (week == 4) {
        this.nowWeek = "星期四";
      } else if (week == 5) {
        this.nowWeek = "星期五";
      } else if (week == 6) {
        this.nowWeek = "星期六";
      } else {
        this.nowWeek = "星期日";
      }
      _this.nowTime = hh + ":" + mf;
      _this.nowDate = yy + "/" + mm + "/" + dd;
    }
  },
  mounted () {
    this.currentTime();
    if (this.info) {
      this.currData = this.priceMap[moment(this.info.peopleEntity.arrivalsTime).format('YYYY-MM-DD')]
    }
    this.getUser();
  },

}
</script>

<style>
.panelone {
  display: flex;
}
.panelone span:nth-child(2n + 1) {
  width: 23mm;
  text-align: right;
}
</style>
